<template>
  <section class="detail">
    <my-header></my-header>
    <List
        title="Token详情"
        :detail="applyInfo"
    >
      <div slot="button" class="button-list">
        <button v-if="IsCategory && applyInfo.status === 8 && applyInfo.total<900*1e8" class="continue"
                @click="routerToHome">继续增发
        </button>
      </div>
    </List>
  </section>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator';
    import MyHeader from '@/components/MyHeader.vue';
    import List from '@/components/List.vue';
    import {getApplyDetail} from '@/api/api';
    import {ConfirmForm} from '@/types/form';

    @Component({
        components: {
            MyHeader,
            List
        }
    })
    export default class RecordDetail extends Vue {
        private getApplyDetail = getApplyDetail;
        private applyInfo: any = {};
        private IsCategory: any = false;
        private ConfirmForm: any = new ConfirmForm();

        beforeMount() {
            let id = String(this.$route.query.id);
            if (id != 'undefined' && id != "" && id != 'null') {
                //查找详情 设置手续费
                this.getApplyDetail({id: id}).then((res: any) => {
                    this.applyInfo = Object.assign(this.ConfirmForm, res);
                    this.applyInfo.issue_charge = res.charge
                    this.IsCategory = Boolean(this.applyInfo.category)
                })
            } else {
                this.$router.go(-1)
            }
        }

        @Watch("$route")
        onRouteChange() {
            console.log("qqq")
        }

        routerToHome() {
            this.applyInfo.resetTotal();
            this.$router.push({
                path: '/home',
                query: {
                    ...this.applyInfo, ...{action: "add"}
                }
            })
        }
    }
</script>

<style scoped lang="scss">
  .detail {
    min-height: 100vh;
    overflow: hidden;
  }

  .button-list {
    display: flex;
    justify-content: center;
  }

  .continue {
    background-color: #5E6377;
  }
</style>